<template>
  <div class="search">
    <div class="search-header">
      <p @click="$router.go(-1)">取消</p>
      <div class="search-inp">
        <span class="iconfont icon-sousuo"></span>
        <input
          v-model="searchKey"
          type="text"
          placeholder="搜游戏/直播/频道"
          @keydown.enter="add"
        />
      </div>
      <p class="ss" @click="add">搜索</p>
    </div>

    <h3>
      <span>大家都在搜</span>
      <span class="iconfont icon-shanchu" @click="delHistory"></span>
    </h3>

    <div class="search_content" v-if="keyWorldList">
      <div
        class="search_content_item"
        v-for="(item, index) in keyWorldList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>

    <!-- 搜索的主播 -->
    <div class="search_list" v-if="anchor_info">
      <h2>主播</h2>
      <router-link
        tag="div"
        :to="'/details?id=' + item.id"
        class="search_item_img"
        v-for="item in search_item"
        :key="item.id"
      >
        <img :src="item.img_head" alt="" />
      </router-link>
    </div>

    <h5 v-if="anchor_info">直播</h5>

    <!-- 直播人员 -->
    <div class="home_lists" v-if="anchor_info">
      <div class="home_lists_content">
        <router-link
          :to="'/details?id=' + item.id"
          class="home_item"
          v-for="item in search_item"
          :key="item.id"
        >
          <div class="home_item_img">
            <img :src="item.img" alt="" />
            <p>{{ item.p }}</p>
          </div>
          <div class="home_item_title">{{ item.title }}</div>
          <div class="home_item_bottom">
            <div class="home_item_name">{{ item.name }}</div>
            <div class="home_item_hot">
              <div class="home_item_hot_img">
                <img
                  src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                  alt=""
                />
              </div>
              <p>{{ item.hot }}</p>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    
    <van-empty description="搜索不存在" v-if="tips" />

    <!-- 正在直播 -->
    <div class="follow_live">正在热播</div>

    <!-- 直播人员 -->
    <div class="home_lists">
      <div class="home_lists_content">
        <router-link
          tag="div"
          :to="'/details?id=' + item.id"
          class="home_item"
          v-for="item in wzry"
          :key="item.id"
        >
          <div class="home_item_img">
            <img :src="item.img" alt="" />
            <p>{{ item.p }}</p>
          </div>
          <div class="home_item_title">{{ item.title }}</div>
          <div class="home_item_bottom">
            <div class="home_item_name">{{ item.name }}</div>
            <div class="home_item_hot">
              <div class="home_item_hot_img">
                <img
                  src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                  alt=""
                />
              </div>
              <p>{{ item.hot }}</p>
            </div>
          </div>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script>
import { getHomeData, getTotalData } from "../api/home.js";
export default {
  data() {
    return {
      wzry: null,
      searchKey: "",
      keyWorldList: [],
      total: null,
      search_item: [],
      //主播与直播信息显示与隐藏
      anchor_info: false,
      tips: false,
    };
  },
  methods: {
    // 添加历史记录,查找对应的主播
    add() {
      if (this.searchKey !== "") {
        this.keyWorldList.unshift(this.searchKey);
        //数组去重
        this.keyWorldList = [...new Set(this.keyWorldList)];
        // 历史记录长度只能为5
        if (this.keyWorldList.length > 5) {
          this.keyWorldList.splice(this.keyWorldList.length - 1, 1);
        }
        window.localStorage.setItem(
          "keyWorldList",
          JSON.stringify(this.keyWorldList)
        );
      }
      if (this.searchKey) {
        this.search_item = this.total.filter((item) => {
          return item.name.includes(this.searchKey);
        });
        if (this.search_item.length) {
          this.anchor_info = true;
          this.tips = false;
          this.$toast('搜索成功');
        } else {
          this.$toast('搜索不存在');
          this.anchor_info = false;
          this.tips = true;
        }
      }
      // console.log(this.search_item);
      this.searchKey = "";
    },
    // 清空历史记录
    delHistory() {
      window.localStorage.removeItem("keyWorldList");
      this.keyWorldList = [];
      this.anchor_info = false;
      this.tips = false;
      this.$toast('清除成功');
    },
  },
  created() {
    getTotalData().then((data) => {
      // console.log(data.data);
      this.total = data.data;
      // console.log(this.total);
    });
    getHomeData().then((data) => {
      // console.log(data.data);
      this.wzry = data.wzry;
    });
  },
  mounted() {
    //防止空数组保错
    this.keyWorldList = JSON.parse(window.localStorage.getItem("keyWorldList"))
      ? JSON.parse(window.localStorage.getItem("keyWorldList"))
      : [];
  },
};
</script>

<style lang="scss" scoped>
h5 {
  padding: 0 15px;
  font-size: 18px;
  font-weight: 700;
}
//直播人员
.home_lists {
  .home_lists_top {
    padding: 10px;
    padding-bottom: 0;
    .home_lists_top_img {
      display: flex;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
      }
      p {
        text-indent: 5px;
        font-size: 16px;
      }
    }
  }
  .home_lists_content {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .home_item {
      width: 48%;
      margin-top: 10px;
      .home_item_img {
        width: 100%;
        height: 99px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          font-size: 12px;
          position: absolute;
          top: 3px;
          right: 3px;
          padding: 2px 6px;
          vertical-align: middle;
          color: #eee;
          background: rgba(44, 49, 54, 0.7);
        }
      }
      .home_item_title {
        width: 100%;
        padding: 3px 0;
        font-size: 13px;
        color: #000;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
      }
      .home_item_bottom {
        display: flex;
        justify-content: space-between;
        height: 13px;
        line-height: 13px;
        font-size: 11px;
        color: #999;
        padding: 3px 0;
        .home_item_name {
          max-width: 40%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: normal;
        }
        .home_item_hot {
          display: flex;
          align-items: center;
          .home_item_hot_img {
            width: 13px;
            height: 13px;
            margin-right: 6px;
            margin-top: -3px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

// 搜索的主播
.search_list {
  padding: 15px;
  padding-top: 0;
  h2 {
    font-size: 18px;
    font-weight: 700;
  }
  .search_item_img {
    margin-top: 6px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin-right: 8px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.search_content {
  padding: 15px;
  padding-top: 0;
  padding-right: 10px;
  display: flex;
  flex-wrap: wrap;
  .search_content_item {
    background-color: #ececec;
    padding: 10px 15px;
    border-radius: 18px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
.search-header {
  display: flex;
  padding: 9px 12px;
  justify-content: space-around;
  border-bottom: 1px solid #cccccc;
  & > p {
    line-height: 35px;
    a {
      font-size: 14px;
      color: #f18d00;
    }
  }
  .ss {
    padding: 0 11px;
    background-color: #f29511;
    color: #fff;
    border-radius: 16px;
    line-height: 37px;
  }
}
.search-inp {
  display: flex;
  padding: 7px 6px 8px 14px;
  font-size: 16px;
  color: #75758b;
  border: 1px solid #ececec;
  border-radius: 15px;
  flex: 1;
  margin: 0 6px;
  input {
    border: 0;
    font-size: 16px;
    color: #75758b;
    margin-left: 10px;
  }
  span {
    margin-top: 3px;
  }
}
h3 {
  padding: 15px;
  font-size: 16px;
  color: #666666;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    &:nth-child(2) {
      font-size: 24px;
    }
  }
}
/* 底部 */
.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  font-size: 14px;
  color: #999999;
  padding-bottom: 34px;
  p {
    margin-bottom: 12px;
  }
}

// 正在直播
.follow_live {
  padding: 0 15px;
  color: rgb(47, 47, 47);
  font-family: 黑体;
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
}
</style>
